<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">类型:</label>
        <div class="layui-input-inline">
            <input type="text" name="themeType" id="search-role-name" autocomplete="off" placeholder="请输入名称"
                   class="layui-input">
        </div>
        <button class="layui-btn" id="search-role-btn">搜索</button>
    </div>
</div>
<script type="text/html" id="role-head-bar">
    <div class="layui-btn-container"><!--lay-event="goEdit"-->
        <a href="sys/theme/fu.html"><button class="layui-btn layui-btn-sm"  ><i class="layui-icon">&#xe654;</i>添加</button></a>

    </div>
</script>
<script type="text/html" id="role-role-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-role">编辑</a>
</script>
<script type="text/html" id="role-status">
    <input type="checkbox" id="status" name="status" value="{{d.id}}" lay-skin="switch" lay-text="有效|无效"
           lay-filter="status-filter" {{ d.status== 1 ? 'checked' : '' }}>
</script>

<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
<!--<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>-->
<!--<script src="/layui/layui.js" charset="utf-8"></script>-->


<table class="layui-table" lay-filter="role-table" id="role-table">
</table>
<script type="text/javascript">

    layui.use(["table", "layer", "form", "tree"], function () {

        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var tree = layui.tree;

        // var layedit = layui.layedit
        //     ,$ = layui.jquery;
        //
        // layedit.set({
        //     uploadImage: {
        //         url: '' //接口url
        //         ,type: '' //默认post
        //     }
        // })
        // // 构建一个默认的编辑器
        // var index = layedit.build('demo1');


        async function treeAjax(data) {
            await tree.render({
                elem: '#menu-tree'
                , data: treeData //数据源
                , spread: true //
                , id: 'demoId' //定义索引
                , showCheckbox: true //是否勾选
                // ,accordion : true //开启手风琴模式
                , onlyIconControl: true //节点左侧图标来展开收缩
            });
            if (data) {
                await $.each(data.result, function (i, obj) {
                    //给树选中
                    tree.setChecked('demoId', obj.id);
                })

            }

        }

        //调用参数menuId数组数据
        function submitCheck() {
            var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
            // var nodeIds = new Array();
            getCheckedId(checkedData);
            alert(checkedIds + "sss")
            return checkedIds;
        }

        // 获取选中节点的id
        function getCheckedId(jsonObj) {
            var id = "";
            $.each(jsonObj, function (index, item) {
                if (item.children.length == 0) {
                    checkedIds.push(item.id);
                } else {
                    id = getCheckedId(item.children);
                }
            });
            console.log(checkedIds)


        }


        table.render({
            id: "role-table",
            elem: '#role-table'
            , toolbar: '#role-head-bar'
            , cellMinWidth: 80
            , url: '/theme/table' //数据接口
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页,
                , limits: [5, 10, 15, 20, 25, 30]
                , limit: 5
            }
            , cols: [[
                {checkbox: true},
                {field: 'themeId', title: 'ID', width: 80}
                , {field: 'themeType', title: '主题类型'}
                , {field: 'themeTitle', title: '主题标题'}
                , {field: 'themeContent', title: '内容'}
                , {field: 'updateTime', title: '更新时间'}
                ,{field: 'themePicture', title: '照片'}
                , {fixed: 'right', title: '操作', toolbar: '#role-role-bar',width: 150}


            ]],
            response: {
                // statusName: 'status' //规定数据状态的字段名称，默认：code
                statusCode: 0 //规定成功的状态码，默认：0
                // ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                // ,countName: 'total' //规定数据总数的字段名称，默认：count
                // ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            },
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }


        });
        //头工具栏事件
        table.on('toolbar(role-table)', function (obj) {
            switch (obj.event) {
                case 'goEdit':
                    openEditWindow(null);
                    break;
            }
            ;
        });
        //监听行工具事件
        table.on('tool(role-table)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit-role': {
                    openEditWindow(data);
                    break;
                }

            }
        });

        // //执行节点勾选
        // tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
        // tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点
        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: $('#role-edit-layer').html(),
                title: '编辑角色'
                , area: ['500px', '300px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load()
                    $.ajax({
                        url: '/theme/html?act=' + (data == null ? 'add' : 'update'),
                        data: $("#role-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('role-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    })
                }, success: function (layero, index) {
                    form.render()
                    if (data != null) {
                        form.val("role-edit-form", {
                            "themeId": data.themeId,
                            "themeType": data.themeType // "name": "value"
                            , "themeTitle": data.themeTitle,
                            "themeContent": data.themeContent,
                            "themePicture": data.themePicture
                        });
                    }
                }
            });
        }

        $("#search-role-btn").click(function () {
            table.reload('role-table', {
                where: {
                    "themeType": $("#search-role-name").val()
                } //设定异步数据接口的额外参数
            });
        })

    });

</script>

<script type="text/html" id="role-edit-layer">
    <form id="role-edit-form" style="width: 80%" class="layui-form" lay-filter="role-edit-form">

        <input type="hidden" name="themeId">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="text" name="themeType" required lay-verify="required" placeholder="请输入类型" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="themeTitle" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">照片信息</label>
            <div class="layui-input-block">
                <input type="text" name="themePicture" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="themeContent" id="LAY_demo1" ><!--style="display: none"-->
            </div>
        </textarea>
        </div>
    </form>
</script>

<script type="text/html" id="menu-tree-layer">
    <!--    <div id="menu-tree"></div>-->
    <ul id="menu-tree">
    </ul>
</script>